<!doctype html><!--声明HTML文件-->
<html><!--根标签，网页的开始-->
 <head><!--给浏览器看的信息-->
  <meta charset="UTF-8"><!--编码格式为国际编码UTF-8-->
  <meta name="Author" content="潭州-乌拉老师">
  <meta name="Keywords" content=""><!--为搜索引擎提供关键字列表-->
  <meta name="Description" content=""><!--对网页的描述，给搜索引擎抓取-->
  <title>Document</title>
  <style type="text/css">
	*{margin:0;padding:0;}
	ul,ol{list-style:none;}
	a{text-decoration:none;}

	/* body{
		text-align:center;
	} */
	ul{
		width: 1000px;
		height: 500px;
		margin:auto;
		border:5px solid red;
		display:flex;
		 /* flex-direction:column;  */
		 flex-wrap:wrap;  
		/* flex-flow:row nowrap; */
		/* justify-content:space-between; */
		/* align-items:center; */
		/* align-content:stretch; */
	}
	li{
		width: 100px;
		height: 100px;
		margin:10px;
		font-size:50px;
		text-align:center;
		line-height:100px;
		color:white;
		background: green;
	}
/* 	li:nth-child(3){
		font-size:20px;
	}
	li:nth-child(4){
		font-size:100px;
	} */
  </style>
 </head>
 <body><!--可视化区域-->
	<ul>
		<li>1x</li>
		<li>2x</li>
		<li>3x</li>
		<li>4x</li>
		<li>5x</li>
		<li>6x</li> 
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>

	</ul>
	<!-- 弹性盒模型 -->
	<!--
		justify-content   定义项目在主轴上的对齐方式	
			flex-start   默认值，左对齐   起点对齐
			flex-end     右对齐			终点对齐
			center       居中对齐
			space-between   两端对齐。项目之间的间隔相等
			space-around     每个项目之间的间隔相等，所以项目之间的
								间隔比项目与容器边框的间隔大一倍
			
		align-items     定义 项目在交叉轴上的对齐方式（当项目一行或一列使用这个）
			flex-start   交叉轴的起点对齐
			flex-end     交叉轴的终点对齐
			center       交叉轴的中点对齐
			baseline     项目的第一行文字的基线对齐
			stretch      默认值。如果项目没有定义宽高或者宽高设置成auto，
							它会沿着交叉轴占满整个容器的宽度或者是高度
		

		align-content  定义多行项目或多列项目在交叉轴上的对齐方式
						当项目多行或多列的时候使用，单行或单列是不起效果的

			flex-start   交叉轴的起点对齐
			flex-end     交叉轴的终点对齐
			center       交叉轴的中点对齐
			space-between   与交叉轴两端对齐，项目之间的间隔相等
			space-around    项目之间的间隔比项目与边框之间的间隔大一倍
			stretch      默认值。没给宽高度的时候，延交叉轴拉伸

		注意：使用align-items就不要使用align-content，因为align-content会使align-items失效，
				并且align-items的存在会影响align-content的效果
		
		弹性盒模型容器属性：
			flex-direction
			flex-wrap
			flex-flow  //简写属性
			justify-content
			align-items
			align-content
	-->
 </body>
</html><!--网页的结束-->
